<!--
 列表格式组件
 @Author: mosowe
 @Date:2023-01-10 15:13:09
-->

<template>
  <view
    :class="['zo-cell-component', props.hideBorder ? 'no-border' : '']"
    @click="toPage"
    :style="cellStyle">
    <!-- 左侧图标 -->
    <view class="left-icon">
      <slot name="left">
        <text
          :class="[props.leftIcon, 'icon']"
          v-if="props?.leftIcon && props?.leftIcon.indexOf('/') === -1"
          :style="`font-size:${props.leftIconSize};color:${props.leftIconColor}`"></text>
        <image
          class="icon image-icon"
          v-if="props?.leftIcon && props?.leftIcon.indexOf('/') > -1"
          :src="props?.leftIcon.startsWith('@') ? props?.leftIcon.substring(1) : props?.leftIcon"
          :style="`width:${props.leftIconSize};height:${props.leftIconSize}`"></image>
      </slot>
    </view>
    <!-- 标题 -->
    <view class="center-title">
      <slot name="title">{{ props.title }}</slot>
    </view>
    <!-- 右侧图标 -->
    <view class="right-icon">
      <slot name="right">
        <template v-if="!hideRightIcon">
          <text
            :class="[props.rightIcon, 'icon']"
            v-if="props?.rightIcon && props?.rightIcon.indexOf('/') === -1"
            :style="`font-size:${props.rightIconSize};color:${props.rightIconColor}`"></text>
          <image
            class="icon image-icon"
            v-if="props?.rightIcon && props?.rightIcon.indexOf('/') > -1"
            :src="
              props?.rightIcon.startsWith('@') ? props?.rightIcon.substring(1) : props?.rightIcon
            "
            :style="`width:${props.rightIconSize};height:${props.rightIconSize}`"></image>
        </template>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
/*
 * 插槽：
 * left 左侧插槽
 * title 中间插槽
 * right 右侧插槽
 */

// props定义
interface PropsType {
  title?: string; // 标题
  path?: string; // 如果有，点击跳转路径
  cellStyle?: any; // 组件根样式
  leftIcon?: string; // 左侧图标，可以使本地图片路径
  leftIconSize?: string; // 左侧图标尺寸
  leftIconColor?: string; // 左侧图标颜色-字体图标有效
  rightIcon?: string; // 右侧图标，可以使本地图片路径
  rightIconSize?: string; // 右侧图标尺寸
  rightIconColor?: string; // 右侧图标颜色-字体图标有效
  hideRightIcon?: boolean; // 是否隐藏右侧图标
  hideBorder?: boolean; // 是否隐藏底部边线
}
const props = withDefaults(defineProps<PropsType>(), {
  title: '标题',
  rightIcon: 'zoicon zo-arrow-right',
  rightIconSize: '28rpx',
  rightIconColor: '#999999',
  leftIconSize: '30rpx',
  leftIconColor: '#333333'
});

// emits
interface EmitsType {
  (e: 'click'): void; // 选中时触发事件
}
const emits = defineEmits<EmitsType>();

// 前往页面
const toPage = () => {
  if (!props.path) {
    emits('click');
    return;
  }
  uni.navigateTo({
    url: props.path
  });
};
</script>

<style lang="scss" scoped>
.zo-cell-component {
  display: flex;
  padding: 40rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 28rpx;
  color: #333333;
  align-items: center;
  &.no-border {
    border-bottom: none;
  }
  .center-title {
    flex: 1;
  }
  .left-icon {
    .icon {
      color: #333333;
      font-size: 28rpx;
      margin-right: 20rpx;
    }
  }
  .right-icon {
    .icon {
      color: #999999;
      font-size: 28rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
